<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>视口</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #F7F7F7;
		}

		.box {
			height: 300px;
			text-align: center;
			background-color: pink;
		}
	</style>
</head>
<body>
<script src="../js/zepto.js"></script>
<!-- 显示窗口信息 -->
<div class="info">
	<span class="width"></span>
	<span class="height"></span>
</div>
	<div class="box">layout viewport</div>
	<script>
		var clientWidth, clientHeight;
		var width = $('.width'),
				height = $('.height');
		// 用来获取viewport
		function getSize() {
			/*默认的视口大小*/
			clientWidth = document.documentElement.clientWidth;
			clientHeight = document.documentElement.clientHeight;

			width.text('PC设备Viewport的宽度为：' + clientWidth);
			height.text('PC设备Viewport的高度为：' + clientHeight);
		}

		// 调用
		getSize();


		var clientWidth = document.documentElement.clientWidth;
		var clientHeight = document.documentElement.clientHeight;

		console.log('layout viewport 的宽度为：' + clientWidth);
		console.log('layout viewport 的高度为：' + clientHeight);
	</script>
</body>
</html>